<template>
  <div class="app-container">
    <h1 class="title">{{ itemData.articleTitle }}</h1>
    <div class="sourceTime">
      <span>{{ itemData.articleSource }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <span>{{ itemData.optTime }}</span>
    </div>
    <div class="content" v-html="itemData.articleContent" />
    <div class="author">{{ itemData.articleAuthor }}</div>
  </div>
</template>

<script>
import { getArticleById } from '@/api/business/common/article/article-list'
export default {
  name: 'ArticlePreview',
  data() {
    return {
      itemData: {
        id: undefined,
        articleTitle: undefined,
        articleSubtitle: undefined,
        articleContent: undefined,
        articleAuthor: undefined,
        articleSource: undefined,
        articleType: undefined,
        optTime: undefined
      }
    }
  },
  created() {
    this.getArticleInfo(this.$route.query.id)
  },
  methods: {
    getArticleInfo(articleId) {
      getArticleById(articleId).then((response) => {
        Object.assign(this.itemData, response)
      })
    }
  }
}
</script>

<style lang="scss">
  .title {
    text-align: center;
  }
  .sourceTime {
    float: right;
    font-size: 14px;
  }
  .content {
    clear: both;
    text-indent: 20px;
    padding: 10px 50px 0;
  }
  .author {
    font-size: 14px;
    float: right;
    margin-bottom: 50px;
  }
</style>

